<template>
  <div class="app-page app-detail">
    <detail-header :title="!detail ? '' : detail.proname"></detail-header>
    <template v-if="detail">
      <detail-banner :list="detail.banners"></detail-banner>
      <p>{{ detail.desc }}</p>
    </template>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push({ name: 'cart' })"/>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <!-- <van-goods-action-button type="warning" text="加入购物车" @click="handleAddGood"/> -->
      <van-goods-action-button @click="isLogin" type="warning" text="加入购物车" />
      <van-goods-action-button  @click="isLoginBuy" type="danger" text="立即购买"/>
    </van-goods-action>
  </div>
</template>
<script>
import Vue from 'vue'
import { GoodsAction, GoodsActionIcon, GoodsActionButton, Toast } from 'vant'
import { getGoodDetailApi, postCarGoodItemApi } from '@/api/haigou'
import DetailHeader from './components/DetailHeader'
import DetailBanner from './components/DetailBanner'
import { mapGetters, mapState } from 'vuex'

Vue.use(GoodsAction)
Vue.use(GoodsActionButton)
Vue.use(GoodsActionIcon)

export default {
  name: 'AppDetail',
  props: ['id'],
  components: {
    DetailHeader,
    DetailBanner
  },
  data () {
    return {
      detail: null,
      loading: false
    }
  },
  computed: {
    ...mapState('user', ['userid']),
    ...mapGetters('user', ['isLogined'])
  },
  methods: {
    async getGoodDetail () {
      // 请求前打开弹框
      const toast = Toast.loading({
        message: '加载中',
        forbidClick: true
      })

      try {
        const detail = await getGoodDetailApi(this.id)
        this.detail = detail
      } catch (error) {}

      // 清除加载弹框
      toast.clear()
    },
    // 加入购物车
    handleAddGood () {
      postCarGoodItemApi({ userid: this.userid, proid: this.id, num: 1 })
    },
    isLogin () {
      if (!this.isLogined) {
        this.$router.push({ name: 'login' })
      } else {
        Toast('加入购物车成功！')
      }
    },
    isLoginBuy () {
      if (!this.isLogined) {
        this.$router.push({ name: 'login' })
      } else {
        Toast('购买成功！')
      }
    }
  },
  watch: {
    id: {
      immediate: true,
      handler () {
        this.getGoodDetail()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.app-detail {
  /*  */
  padding-top: 44px;
}
</style>
